<template>
		<div id="boxx">
        <article class="atc">
            <div>
                <h1>5.0</h1>
                <p>综合评价</p>
                <p>高于周边商家86.9%</p>
            </div>
            <div>
                <p>服务态度<span><i class="">1</i><i class="">1</i><i class="">1</i></span><em>5.0</em></p>
                <p>菜品评价<span><i class="">1</i><i class="">1</i><i class="">1</i></span><em>5.0</em></p>
                <p>送达时间<span>46分钟</span></p>
            </div>
        </article>
        <div class="pj">
            <figure class="fig">
                <button>全部(18)</button>
                <button>满意(18)</button>
                <button>不满意(0)</button>
            </figure>
            <div class="figx">
                <dl>
                    <dt>
                        <img src="" alt="">
                    </dt>
                    <dd>
                        <p><span>匿名用户</span>2017-12-11</p>
                        <p><i class="">1</i><i class="">1</i><i class="">1</i><i class="">1</i><i class="">1</i></p>
                    </dd>
                </dl>
                <div class="fi">
                    <span>蒜香烤牛舌</span>
                    <span>三文鱼刺身</span>
                    <span>秋天的童话</span>
                    <span>海洋在呼唤</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
		data() {
			return {

			}
		},
		methods: {
			//事件
			
		},
		mounted(){
			//原生js
			
		}
	}
</script>
</script>

<style scoped lang="less">
  .px2rem(@name, @px){
    @{name}: @px / 37.5 * 1rem;
  }
  #boxx{
    background: rgb(245,245,245)
}
.atc{
    .px2rem(height,96);
    display: flex;
    background: #fff;
    .px2rem(padding,12);
    .px2rem(margin-bottom,12);
    box-sizing: border-box;
    &>div:first-child{
        .px2rem(width,115);
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items:center;
        h1{
            color: rgb(255,95,0);
            .px2rem(font-size,20);
            font-weight: bold;
        }
        p:first-of-type{
            .px2rem(margin,5)
        } 
    }
    &>div:last-child{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .px2rem(line-height,22);
        .px2rem(padding-left,25);
        span{
            .px2rem(margin-left,10);
            .px2rem(margin-right,10);
        }
        em{
            color: rgb(255,96,0);
        }
    }
}
.pj{
    background: #fff;
    .px2rem(padding,12);
    padding-top: 0;
}
.fig{
    .px2rem(height,60);
    background: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    .px2rem(border-width,1);
    button{
        .px2rem(padding,5);
        .px2rem(font-size,10);
        border: none;
        border-radius: 5%;
        background: rgb(0,151,255);
        color: #fff;
        .px2rem(margin-left,5)
    }
}
.figx{
    border-bottom: 1px solid #ccc;
    .px2rem(border-width,1);
    dl{
        .px2rem(height,50);
        display: flex;
        align-items: center;
        dt{
            .px2rem(width,30);
            .px2rem(height,30);
            background: skyblue;
            .px2rem(margin-right,12);
            border-radius:50%; 
        }
        dd{
            p{
                color: #999;
                span{
                    .px2rem(font-size,15);
                    color: initial;
                    .px2rem(margin-right,5)
                }
            }
        }
    }
    .fi{
        display: flex;
        flex-wrap:wrap;
        justify-content: left;
        .px2rem(padding-left,50);
        .px2rem(padding-right,50);
        span{
            .px2rem(margin,5);
            .px2rem(padding,5);
            border:1px solid #ccc;
            .px2rem(border-width,1) ;
            border-radius:5%;
        }
    }
}
  
</style>
